<template>
  <view class="trip-list">
    <view class="list">

      <view class="item" v-for="(item, index) in invoiceList">

        <view class="time">
          {{ item.createTime == null ? '' : item.createTime | format('yyyy年MM月') }}
        </view>
        <view class="header">
          <view class="crate_time">
            {{ item.cname }}
            {{ item.createTime == null ? '' : item.createTime | format('yyyy-MM-dd hh:mm') }}
          </view>
        </view>
        <view class="radio-content">{{ item.label }}</view>
        <view class="undata">
          <uni-data-checkbox multiple v-model="item.id" :localdata="sexs"/>
        </view>
        <view class="start"><span class="s1">·</span>{{ item.bname }}</view>
        <view class="end"><span class="s2">·</span>{{ item.fname }}</view>
        <view class="price">{{ item.allPrice }}<span style="font-size: 18px;color: #929292">元</span></view>
      </view>
      <view class="save">
        <view class="hekd">
          <button class="option-item3" @click="quanxuan()">全选</button>
        </view>
        <view class="inside">
          <view class="num">{{ allPriceNum }}元
          </view>
          <view class="total-num">共计{{ total }}个行程</view>
          <view class="actions">
            <view>
              <button class="option-item2" @click="invoiceSave(id,allPriceNum)">去开票</button>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import {historyList, listMassage, saveMassage} from "@/api/invoice"
import UniBadge from "../../../uni_modules/uni-badge/components/uni-badge/uni-badge.vue";

export default {
  components: {UniBadge},
  onNavigationBarButtonTap() {
    this.$tab.navigateTo('/pages/mine/invoice/log/index')
  },
  data() {
    return {
      sexs: [{
        text: '',
        value: "",
        selected: false
      }],
      id: [],
      invoiceList: [],
      total: 0,
      disabled: false,
      index: 0,
      allPriceNum: 0,
    }
  },
  onLoad() {
    this.getHistoryList();
    this.allPirceNum();
  },
  filters: {
    format(value, arg) {
      function dateFormat(date, format) {
        if (typeof date === 'string') {
          var mts = date.match(/(\/Date\((\d+)\)\/)/)
          if (mts && mts.length >= 3) {
            date = parseInt(mts[2])
          }
        }
        date = new Date(date)
        if (!date || date.toUTCString() == 'Invalid Date') {
          return ''
        }
        var map = {
          'M': date.getMonth() + 1, //月份
          'd': date.getDate(), //日
          'h': date.getHours(), //小时
          'm': date.getMinutes(), //分
          's': date.getSeconds(), //秒
          'q': Math.floor((date.getMonth() + 3) / 3), //季度
          'S': date.getMilliseconds() //毫秒
        }
        format = format.replace(/([yMdhmsqS])+/g, function (all, t) {
          var v = map[t]
          if (v !== undefined) {
            if (all.length > 1) {
              v = '0' + v
              v = v.substr(v.length - 2)
            }
            return v
          } else if (t === 'y') {
            return (date.getFullYear() + '').substr(4 - all.length)
          }
          return all
        })
        return format
      }

      return dateFormat(value, arg)
    }
  },
  methods: {
    quanxuan() {
      for (let i = 0; i < this.sexs.length; i++) {
        if (this.sexs[i].selected === true) {
          this.sexs[i].selected = false
        } else {
          this.sexs[i].selected = true
        }
      }
    },
    invoiceSave(id, allPriceNum) {
      for (let i = 0; i < this.invoiceList.length; i++) {
        this.id.push(this.invoiceList[i].orderId)
      }
      this.$tab.navigateTo('/pages/mine/invoice/save?id=' + JSON.stringify(id) + "&allPriceNum=" + JSON.stringify(allPriceNum))
    },
    allPirceNum() {
      this.allPriceNum = 0;
      listMassage(this.userId).then(res => {
        for (let i = 0; i < this.invoiceList.length; i++) {
          this.allPriceNum += (this.invoiceList[i].allPrice);
        }
        this.allPriceNum = this.allPriceNum.toFixed(2);
      })
    },
    getHistoryList() {
      listMassage().then(res => {
        this.invoiceList = res.rows
        this.total = res.total
      })
    }
  }
}
</script>

<style lang="scss">
page {
  background-color: #f5f6f7;

  .list {

    .item {
      background: #fff;
      padding: 24 rpx;
      border-radius: 20px;
      margin-top: 24 rpx;


      .time {
        width: 100%;
        height: 30px;
        background-color: #F5F6F7;
        margin-left: 1px;
        margin-top: 15px;
      }

      .radio-content {
        margin-left: 10px;
      }

      .header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 12 rpx;

        .crate_time, {
          font-size: 14px;
          color: #999;
          padding-left: 5px;
        }
      }

      .price {
        font-size: 25px;
        color: #2f2d2d;
        //margin-left: 290px;
        float: right;
        margin-top: -40px;
        margin-right: 20px;
      }

      .undata {
        margin-left: 20px;
        margin-top: 20px;
      }

      .start {
        //padding: 3px;
        font-size: 12px;
        color: #2f2d2d;
        display: flex;
        align-items: center; /* 垂直居中 */
        height: 20px; /* 视图的高度 */
        margin-top: -34px;
        margin-left: 50px;
      }

      .end {
        padding: 3px;
        font-size: 12px;
        color: #2f2d2d;
        display: flex;
        align-items: center; /* 垂直居中 */
        height: 30px; /* 视图的高度 */
        margin-top: 5px;
        margin-left: 48px;
      }


      .s1 {
        font-size: 45px;
        color: #21dd71;
        margin-right: 10px;
      }

      .s2 {
        font-size: 45px;
        color: #f34c05;
        margin-right: 10px;
      }
    }

  }


}

.save {
  background-color: #FFFFFF;
  width: 100%;
  height: 60px;
  padding: 24 rpx;
  border-radius: 10px;

  position: absolute;
  bottom: 0;

  .hekd {
    //margin-top: 15px;
    //margin-left: 20px;

    .option-item3 {
      height: 38px;
      width: 60px;
      background-color: #89DBCC;
      font-size: 14px;
      margin-left: 10px;
      margin-top: 14px;
      border-radius: 20px;
      // 颜色rgb
      color: rgb(255, 255, 255);
      border: 1px solid rgb(255, 255, 255);;
    }

  }

  .inside {
    width: 80%;
    height: 40px;
    background-color: #74809A;
    border-radius: 60px;
    float: right;
    margin-top: -40px;

    .num {
      color: #f5f6f7;
      font-size: 18px;
      display: grid;
      align-items: center;
      margin-left: 10px;
      margin-top: 10px;
    }

    .total-num {
      color: #f5f6f7;
      text-align: center;
      margin-top: -22px;
      margin-right: 80px;
    }

    .actions {
      display: flex;
      justify-content: flex-end;
      gap: 8 rpx;
      margin-top: -32px;

      .option-item2 {
        height: 41px;
        width: 120px;
        background-color: #89DBCC;
        margin-left: 8 rpx;
        border-radius: 8 rpx;
        font-size: 16px;
        border-radius: 20px;
        // 颜色rgb
        color: rgb(255, 255, 255);
        border: 1px solid rgb(255, 255, 255);;
      }
    }
  }
}

.trip-list {
  display: flex;
  flex-direction: column;
  gap: 19 rpx;
}

</style>
